<template>
  <div class="view">
    <el-row class="handle-box">
      <span>{{$t('wellcondition.wellName')}}：</span>
      <el-input
        v-model="searchname"
        :placeholder="$t('public.text')"
        clearable
      ></el-input>
      <span>{{$t('wellcondition.wellConditionsType')}}：</span>
      <el-select
        v-model="value"
        filterable
        clearable
        :placeholder="$t('public.select')"
      >
        <el-option
          v-for="item in optionwelltype"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>

      <el-button type="primary" class="seacths" id="btn" @click="search" icon="el-icon-search">{{$t("public.search")}}</el-button>
    </el-row>
<div class="tablebox">
    <template>
      <el-table :data="tables" stripe class="tablefisbox">
        <el-table-column prop="id" :label="$t('public.number')" width="100">
        </el-table-column>
        <el-table-column
          prop="wellname"
          :label="$t('wellcondition.wellName')"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="platformname"
          :label="$t('wellcondition.platformname')"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="welltype" :label="$t('wellcondition.wellConditionsType')">
        </el-table-column>
        <el-table-column prop="createdate" :label="$t('wellcondition.createdate')">
        </el-table-column>
        <el-table-column prop="status" :label="$t('wellcondition.status')">
        </el-table-column>
        <el-table-column prop="handle" :label="$t('public.operation')" >

        </el-table-column>
      </el-table>
    </template>

    <el-col class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageSize"
        :total="total"
      >
      </el-pagination>
    </el-col>
</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addVisible:false,
      editVisible: false,
      editform: {},
      addform: {},
      currentPage4: 1, //当前页数
      ruleValidate: {
        name: {required: true, message: "不能为空", trigger: "blur"},
        type: {required: true, message: "不能为空", trigger: "blur"}
      },
      // tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      idx: -1,
      pageTotal: 0,
      optionwelltype: [
        {
          value: "选项1",
          label: "卡钻",
        },
        {
          value: "选项2",
          label: "井涌",
        },
        {
          value: "选项3",
          label: "井漏",
        },
        {
          value: "选项4",
          label: "溢流",
        },
        {
          value: "选项5",
          label: "掉钻具",
        },
      ],
      value: "",
      tableData: [
        {
          id: 1,
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "井涌",
          createdate: "2020-11-23 12:05:39",
          status: "显示", 
          handle: "隐藏",
        },
        {
          id: 2,
          wellname: "PL20-3-B09ST01",
          platformname: "海洋石油945",
          welltype: "卡钻",
          createdate: "2020-11-23 12:05:39",
          status: "显示", 
          handle: "隐藏",
        },
        {
          id: 3,
          wellname: "PL21-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "井漏",
          createdate: "2020-11-23 12:05:39",
          status: "显示", 
          handle: "隐藏",
        },
        {
          id: 4,
          wellname: "PL22-3-B09ST01",
          platformname: "海洋石油946",
          welltype: "井涌",
          createdate: "2020-11-23 12:05:39",
          status: "显示", 
          handle: "隐藏",
        },
        {
          id: 5,
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油948",
          welltype: "掉钻具",
          createdate: "2020-11-23 12:05:39",
          status: "显示", 
          handle: "隐藏",
        },
        {
          id: 6,
          wellname: "PL19-3-B09ST01",
          platformname: "海洋石油944",
          welltype: "井涌",
          createdate: "2020-11-23 12:05:39",
          status: "显示", 
          handle: "隐藏",
        },
      ],
      searchname: "",
      // list: [],
      // searchKey: {},
    };
  },
  mounted() {
       document.onkeydown = function (event) {  // 回车实现点击功能
        var e = event || window.event;
        if (e && e.keyCode == 13) { 
            $("#btn").click(); 
        }
    }; 
  },
  watch: { // watch实时监控输入内容,如果没有任何内容,则显示整个列表
    searchname(current, old) {
      let that = this;
      if(current == ''){
        that.tableData = that.tableData
      }
    } 
  },
  computed:{
    tables() {
      // this.$set(this.query, 'pageIndex', 1);
      // this.getData();
      const search = this.searchname;
      const value = this.value;
      if(search || value){
        return this.tableData.filter(data => {
          return Object.keys(data).some(key => {
            if(search){
              return String(data[key]).toLowerCase().indexOf(search) > -1
            }else if(value){
              return String(data[key]).toLowerCase().indexOf(value) > -1
            }
          })
        })
      }
      return this.tableData
    },
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    // getData() {
    //     fetchData(this.query).then(res => {
    //         console.log(res);
    //         this.tableData = res.list;
    //         this.pageTotal = res.pageTotal || 50;
    //     });
    // },

    //模糊搜索
    search() {
      let that = this;
      if (that.searchname === '' || typeof(that.searchname)=="undefined")
      {
        that.list=that.tableData;
      }else{
        that.list=[]
        that.tableData.map(function(item) {
          console.log(typeof item.id);
        if (item.name.search(that.searchData) != -1) { // 筛选条件
          that.list.push(item);
        }
      });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>